//折线图
var drawXY = function (id, title, datax, texty1, texty2, texty3, series) {
    $(id).highcharts({
        chart: {
            zoomType: 'xy',
            style: {
                height: 320
            }
        },
        credits: {
            enabled: false,
        },
        title: {
            align: 'left',
            text: title,
            style: {
                fontSize: '15px'
            }
        },
        subtitle: {
            text: '',
            style: {
                fontSize: '8px'
            }
        },
        plotOptions: {
            series:
                {
                    marker: {enabled: false}
                }
        },
        xAxis: [{
            categories: datax,
            crosshair: true
        }],
        yAxis: [{ // Secondary yAxis
            title: {
                text: texty2,
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                formatter: function () {
                    if (this.value > 1000 && this.value < 10000) {
                        return this.value / 1000 + 'k'
                    } else if (this.value > 10000 && this.value < 100000000) {
                        return this.value / 10000 + 'w'
                    } else if (this.value > 100000000) {
                        return this.value / 100000000 + 'e'
                    } else {
                        return this.value;
                    }
                },
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        }, { // Primary yAxis
            labels: {
                formatter: function () {
                    if (this.value > 1000 && this.value < 10000) {
                        return this.value / 1000 + 'k'
                    } else if (this.value >= 10000 && this.value < 100000000) {
                        return this.value / 10000 + 'w'
                    } else if (this.value >= 100000000) {
                        return this.value / 100000000 + 'e'
                    } else {
                        return this.value;
                    }
                },
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            title: {
                text: texty1,
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }],
        tooltip: {
            shared: true,
            formatter: function () {
                if (this.points[0]) {
                    var tip = this.points[0].x + '<br/>' + texty1 + ':' + bigNumFmt(this.points[0].y);
                }
                if (this.points[1]) {
                    tip += '<br/>' + texty2 + ':' + bigNumFmt(this.points[1].y)
                }
                if (this.points[2]) {
                    tip += '<br/>' + texty3 + ':' + bigNumFmt(this.points[2].y)
                }
                return tip;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            x: 0,
            verticalAlign: 'top',
            y: -20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: series
    })
};

function bigNumFmt(value) {
    if (!value) return 0;
    if (value > 1000 && value < 10000) {
        return (value / 1000).toFixed(2) + 'k'
    } else if (value >= 10000 && value < 100000000) {
        return (value / 10000).toFixed(2) + 'w'
    } else if (value >= 100000000) {
        return (value / 100000000).toFixed(2) + 'e'
    } else {
        return value.toFixed(2);
    }
}

function ratioFmt(value) {
    if (!value) return 0;
    return (value * 100).toFixed(2) + '%';
}

var sparkLine = function () {
    Highcharts.SparkLine = function (a, b, c) {
        var hasRenderToArg = typeof a === 'string' || a.nodeName,
            options = arguments[hasRenderToArg ? 1 : 0],
            defaultOptions = {
                chart: {
                    renderTo: (options.chart && options.chart.renderTo) || this,
                    backgroundColor: null,
                    borderWidth: 0,
                    type: 'area',
                    margin: [2, 0, 2, 0],
                    width: 120,
                    height: 20,
                    style: {
                        overflow: 'visible'
                    },
                    skipClone: true
                },
                title: {
                    text: ''
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    startOnTick: false,
                    endOnTick: false,
                    tickPositions: []
                },
                yAxis: {
                    endOnTick: false,
                    startOnTick: false,
                    labels: {
                        enabled: false
                    },
                    title: {
                        text: null
                    },
                    tickPositions: [0]
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    backgroundColor: null,
                    borderWidth: 0,
                    shadow: false,
                    useHTML: true,
                    hideDelay: 0,
                    shared: true,
                    padding: 0,
                    positioner: function (w, h, point) {
                        return {x: point.plotX - w / 2, y: point.plotY - h};
                    }
                },
                plotOptions: {
                    series: {
                        animation: false,
                        lineWidth: 1,
                        shadow: false,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        marker: {
                            radius: 1,
                            states: {
                                hover: {
                                    radius: 2
                                }
                            }
                        },
                        fillOpacity: 0.25
                    },
                    column: {
                        negativeColor: '#910000',
                        borderColor: 'silver'
                    }
                }
            };
        options = Highcharts.merge(defaultOptions, options);
        return hasRenderToArg ?
            new Highcharts.Chart(a, options, c) :
            new Highcharts.Chart(options, b);
    };

    var start = +new Date(),
        $tds = $('td[data-sparkline]'),
        fullLen = $tds.length,
        n = 0;

    function doChunk() {
        var time = +new Date(),
            i,
            len = $tds.length,
            $td,
            stringdata,
            arr,
            data,
            chart;
        for (i = 0; i < len; i += 1) {
            $td = $($tds[i]);
            data = $td.data('sparkline');
            // arr = stringdata.split(';');
            // data = $.map(arr[0].split(','), parseFloat);
            // data = $.map(stringdata, parseFloat);
            chart = {};
            // if (arr[1]) {
            //     chart.type = arr[1];
            // }
            $td.highcharts('SparkLine', {
                series: [{
                    data: data,
                    pointStart: 1
                }],
                tooltip: {
                    // headerFormat: '<span>' + $td.parent().find('th').html() + ', {point.x}:</span><br/>',
                    pointFormat: '<b>{point.y}</b>'
                },
                chart: chart
            });
            n += 1;
            // If the process takes too much time, run a timeout to allow interaction with the browser
            if (new Date() - time > 500) {
                $tds.splice(0, i + 1);
                setTimeout(doChunk, 0);
                break;
            }
            // 打印耗时
            if (n === fullLen) {
                $('#result').html('生成' + fullLen + '个迷你图，耗时 ' + (new Date() - start) + ' 毫秒');
            }
        }
    }

    doChunk();
};

// 速度仪表
var drawDish = function (id, score, date) {
    $(id).highcharts({
        chart: {
            type: 'solidgauge'
        },
        credits: {
            enabled: false,
        },
        title: null,
        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        tooltip: {
            enabled: false
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: '质量分(' + date + ')', y: -70
            },
            stops: [
                [0.01, '#DF5353'], // red
                [0.79, '#DF5353'], // red
                [0.80, '#DDDF0D'], // yellow
                [0.89, '#DDDF0D'], // yellow
                [0.90, '#55BF3B'] // green
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            labels: {
                y: 16
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: '质量分',
            data: [score],
            dataLabels: {// 中间显示分数
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                    '<span style="font-size:12px;color:silver"></span></div>'
            },
            tooltip: {
                valueSuffix: ' 分'
            }
        }]
    });
};
//柱状堆叠图
var drawZhu = function (id, title, data) {
    $(id).highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        xAxis: {
            categories: ['06月', '07月', '08月', '09月', '10月']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'SAAS2占比'
            },
            stackLabels: {  // 堆叠数据标签
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    '总量: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                        textOutline: '1px 1px black'
                    }
                }
            }
        },
        series: data
    });
};
//曲线图
var drawCurve = function (id, data, title, pointStart, pointInterval) {
    $(id).highcharts({
        chart: {
            type: 'spline'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        subtitle: {
            text: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            },
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        yAxis: {
            title: {
                text: null
            },
        },
        tooltip: {
            valueSuffix: ''
        },
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
                lineWidth: 1,
                pointInterval: pointInterval, // one m
                pointStart: Date.UTC(pointStart.getFullYear(), pointStart.getMonth(), pointStart.getDate(), pointStart.getHours(), pointStart.getMinutes()),
            }
        },
        // series: {
        // },
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    })
};
//可缩放的曲线图
var drawChangeCur = function (id, dataSeries, title) {
    Highcharts.setOptions({
        global: {
            useUTC: false//是否使用世界标准时间
        },
    });

    return new Highcharts.Chart(id, {
        chart: {
            type: 'spline',
            zoomType: 'x',
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        tooltip: {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%Y-%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            allowDecimals: false
        },
        legend: {
            enabled: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 1,
                    symbol: 'circle'
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null,
                // pointInterval: pointInterval, // one m
                // pointStart: Date.UTC(pointStart.getFullYear(), pointStart.getMonth(), pointStart.getDate(), pointStart.getHours(), pointStart.getMinutes()),
            }
        },
        series: dataSeries
    });
};

var drawChangeCur1 = function (id, dataSeries, title) {
    Highcharts.setOptions({
        global: {
            useUTC: false//是否使用世界标准时间
        }
    });

    return new Highcharts.Chart(id, {
        chart: {
            type: 'spline',
            zoomType: 'x',
            backgroundColor: '#000000'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        tooltip: {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%Y-%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            },
            formatter: function () {
                return dateFormat(this.point.x) + '<br/>' + bigNumFmt(this.point.y)
            }
        },
        yAxis: {
            tickWidth: 0,//去掉刻度
            gridLineWidth: 0,//去掉y轴方向的横线
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    if (this.value > 1000 && this.value < 10000) {
                        return this.value / 1000 + 'k'
                    } else if (this.value > 10000 && this.value < 100000000) {
                        return this.value / 10000 + 'w'
                    } else if (this.value > 100000000) {
                        return this.value / 100000000 + 'e'
                    } else {
                        return this.value;
                    }
                },
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 1,
                    symbol: 'circle'
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null,
            }
        },
        series: dataSeries
    });
};

var drawTop = function (id, datax, datay, title) {
    $(id).highcharts({
        chart: {
            type: 'bar',
            backgroundColor: '#000000'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        xAxis: datax,
        yAxis: {
            min: 0,
            title: {
                text: '数量',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            },
            tickWidth: 0,//去掉刻度
            gridLineWidth: 0,//去掉y轴方向的横线
        },
        tooltip: {
            valueSuffix: ' 百万'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true,
                    allowOverlap: true // 允许数据标签重叠
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        series: datay
    })
};


Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

function activeLastPointToolip(chart) {
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length - 1]);
}

function drawDynamic(id, datax, datay, title) {
    $(id).highcharts({
        chart: {
            type: 'spline',
            marginRight: 10,
            events: {
                load: function () {
                    var series = this.series[0],
                        chart = this;
                    activeLastPointToolip(chart);
                    setInterval(function () {
                        var x = (new Date()).getTime(), // 当前时间
                            y = Math.random();          // 随机值
                        series.addPoint([x, y], true, true);
                        activeLastPointToolip(chart);
                    }, 1000);
                }
            },
            backgroundColor: '#000000',
            dashStyle: 'ShortDashDotDot'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: '动态模拟实时数据'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            tickWidth: 0,//去掉刻度
        },
        yAxis: {
            tickWidth: 0,//去掉刻度
            gridLineWidth: 0,//去掉y轴方向的横线
            // labels: {
            //     enabled: false
            // },//去掉刻度数字
            title: {
                text: null
            }
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 1,
                    symbol: 'circle'
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null,
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            name: '随机数据',
            data: (function () {
                // 生成随机值
                var data = [],
                    time = (new Date()).getTime(),
                    i;
                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }]
    })
};
var drawLine2 = function (id, title, data,data2, date) {
    $(id).highcharts({
        chart: {
            zoomType: 'x'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        subtitle: {
            text: '更新时间:' + date
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        tooltip: {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%Y-%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            },
            formatter:function(){
                return Highcharts.dateFormat('%Y-%m-%d',this.x) +
                    '<br/>' + bigNumFmt(this.y)
            }
        },
        yAxis: {
            title: {
                text: '记录量'
            },labels: {
                formatter: function () {
                    return bigNumFmt(this.value)
                }
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                marker: {
                    radius: 1.2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: [{
            type: 'area',
            name: '数据量',
            data: data,
            color:'#00ccff'
        },{
            type: 'area',
            name: '数据量',
            data: data2,
            color:'#99ff99'
        }]
    });
};

var drawLine = function (id, title, data, date) {
    $(id).highcharts({
        chart: {
            zoomType: 'x'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: title
        },
        subtitle: {
            text: '更新时间:' + date
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        tooltip: {
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%Y-%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            },
            formatter:function(){
                return dateFormat(this.x) +
                    '<br/>' + this.y
            }
        },
        yAxis: {
            title: {
                text: '记录量'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 1.2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: [{
            type: 'area',
            name: '数据量',
            data: data
        }]
    });
};


var drawAreaRatio = function (id) {
    $(id).highcharts({
        chart: {
            type: 'area'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: '全球各大洲人口占比'
        },
        subtitle: {
            text: '数据来源: Wikipedia.org'
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: '百分比'
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} 百万)<br/>',
            shared: true
        },
        plotOptions: {
            area: {
                stacking: 'percent',
                lineColor: '#ffffff',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#ffffff'
                }
            }
        },
        series: [{
            name: '亚洲',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: '非洲',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: '欧洲',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: '美洲',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: '大洋洲',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]
    });
};

var drawColumn = function (id) {
    $(id).highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: '月平均降雨量'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: [
                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '降雨量 (mm)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '东京',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: '纽约',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: '伦敦',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: '柏林',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
};

var drawPie = function (id) {
    $(id).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        credits: {
            enabled: false,
        },
        title: {
            text: '2018年1月浏览器市场份额'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Chrome',
                y: 61.41,
                sliced: true,
                selected: true
            }, {
                name: 'Internet Explorer',
                y: 11.84
            }, {
                name: 'Firefox',
                y: 10.85
            }, {
                name: 'Edge',
                y: 4.67
            }, {
                name: 'Safari',
                y: 4.18
            }, {
                name: 'Sogou Explorer',
                y: 1.64
            }, {
                name: 'Opera',
                y: 1.6
            }, {
                name: 'QQ',
                y: 1.2
            }, {
                name: 'Other',
                y: 2.61
            }]
        }]
    });
};
var drawHeatMap = function (id, userList, dtList, series) {
    $(id).highcharts({
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1,
            height: 150+userList.length * 20
        },
        title: {
            text: '用户访问统计'
        },
        xAxis: {
            categories: dtList
        },
        yAxis: {
            categories: userList,
            title: null
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0],
            max: 100
        },
        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 150+userList.length * 20
        },
        tooltip: {
            formatter: function () {
                return this.series.xAxis.categories[this.point.x] + '<br/>' +
                    this.point.value + '<br/>' + this.series.yAxis.categories[this.point.y] + '';
            }
        },
        series: [{
            name: '用户访问统计',
            borderWidth: 1,
            data: series,
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]
    });
};

var drawMap = function (id) {
    Highcharts.setOptions({
        lang: {
            drillUpText: '< 返回 “{series.name}”'
        }
    });
    var map = null,
        geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
    $.getJSON(geochina + 'china.json&callback=?', function (mapdata) {
        var data = [];
        // 随机数据
        Highcharts.each(mapdata.features, function (md, index) {
            var tmp = {
                name: md.properties.name,
                value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
            };
            if (md.properties.drilldown) {
                tmp.drilldown = md.properties.drilldown;
            }
            data.push(tmp);
        });
        map = new Highcharts.Map(id,{
            chart: {
                events: {
                    drilldown: function (e) {
                        this.tooltip.hide();
                        console.log(e);
                        // 异步下钻
                        if (e.point.drilldown) {
                            var pointName = e.point.properties.fullname;
                            map.showLoading('下钻中，请稍后...');
                            // 获取二级行政地区数据并更新图表
                            $.getJSON(geochina + e.point.drilldown + '.json&callback=?', function (data) {
                                data = Highcharts.geojson(data);
                                Highcharts.each(data, function (d) {
                                    if (d.properties.drilldown) {
                                        d.drilldown = d.properties.drilldown;
                                    }
                                    d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                                });
                                map.hideLoading();
                                map.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                                map.setTitle({
                                    text: pointName
                                });
                            });
                        }
                    },
                    drillup: function () {
                        map.setTitle({
                            text: '中国'
                        });
                    }
                }
            },
            title: {
                text: '中国地图'
            },
            subtitle: {
                useHTML: true,
            },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
            tooltip: {
                useHTML: true,
                headerFormat: '<table><tr><td>{point.name}</td></tr>',
                pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
                    '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
                    '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
                    '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>',
                footerFormat: '</table>'
            },
            colorAxis: {
                min: 0,
                minColor: '#fff',
                maxColor: '#006cee',
                labels: {
                    style: {
                        "color": "red", "fontWeight": "bold"
                    }
                }
            },
            series: [{
                data: data,
                mapData: mapdata,
                joinBy: 'name',
                name: '中国地图',
                states: {
                    hover: {
                        color: '#a4edba'
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}:{point.value}'
                }
            }]
        });
    });

};